<template>
  <div class="home">
    <div class="title">
      <!-- 顶部导航栏 -->
      <!-- <div class="header">
        <van-sticky>
          <van-nav-bar title="易洁家政" />
        </van-sticky>
      </div> -->
    </div>
    <!-- {{ownOrder}} -->
    <!-- 定义页面的结构 -->

    <!-- 顶部轮播区域 -->
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="swipe in swipeData" :key="swipe.id">
          <img :src="swipe.url" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- <div style="height:500x;"></div> -->
    <!-- 卡片 -->
    <div class="card">
      <van-grid>
        <van-grid-item icon="orders-o" text="订单" />
        <van-grid-item icon="bill-o" text="收益" />
        <van-grid-item icon="service-o" text="帮助" />
        <van-grid-item icon="user-o" text="我的" />
      </van-grid>
    </div>
    <!-- 我的订单 -->
    <div class="orderTitle">
      <van-cell title="我的订单" icon="records" size="100px" />
      <div class="orderCard">
        <van-row gutter="20">
          <van-col span="20" offset="2"
            ><van-card
              v-for="item in ownOrder"
              :key="item.id"
              :price="item.total"
              :desc="
                item.address.province + item.address.city + item.address.address
              "
              :title="item.customer.username"
              :thumb="item.customer.userFace"
              @click="carClick(item)"
            >
              <template #tags>
                <van-tag plain type="success" v-if="item.status == '已完成'">{{
                  item.status
                }}</van-tag>
                <van-tag
                  plain
                  type="primary"
                  v-else-if="item.status == '待服务'"
                  >{{ item.status }}</van-tag
                >
                <van-tag plain type="danger" v-else>{{ item.status }}</van-tag>
              </template>
              <template #footer>
                <van-tag plain>{{
                  new Date(parseInt(item.serviceTime))
                    .toLocaleString()
                    .replace(/:\d{1,2}$/, " ")
                }}</van-tag>
              </template>
            </van-card>
          </van-col>
        </van-row>
      </div>
    </div>

    <div style="height:55px;"></div>
  </div>
</template>

<script>
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      employeeId: "1",
      carValue: "",
      ownOrder: "",
      // 轮播图数组
      swipeData: [],
    };
  },
  computed: {
    // 引入栏目数据
    ...mapState("category", ["categoryData"]),
    ...mapState("product", ["productData"]),
    ...mapState("user", ["userInfo"]),
  },
  methods: {
    carClick(item) {
      this.$router.push({
        path: "/manager/orderDetail",
        query: {
          item: item,
        },
      });
    },
    // 引入category vuex中的方法
    ...mapActions("category", ["getAllCategoryData"]),
    ...mapActions("user", ["getUserInfo"]),
    // 引入peoduct vuex中的方法
    ...mapActions("product", ["getAllProductData"]),
    setEmployeeId() {
      this.employeeId = this.userInfo.id;
    },
    // 查询订单
    async getAllOrder() {
      let res = await get("/order/pageQuery", {
        page: 1,
        pageSize: 100,
        employeeId: this.employeeId,
      });
      this.ownOrder = res.data.data.list;
      // console.log(this.ownOrder);
    },
    // 获取所有轮播图的数据
    async getAllSwipeData() {
      let res = await get("/carousel/query", { status: "正常" });
      // 将拿到的数据赋值给轮播图数组
      this.swipeData = res.data.data;
    },
    // 查询栏目数据
    queryCategory() {
      let data = {
        page: 1,
        pageSize: 5,
      };
      // 调用vuex中的方法 传参
      this.getAllCategoryData(data);
    },
    // 获取产品数据
    queryProduct() {
      let data = {
        page: 1,
        pageSize: 8,
      };
      this.getAllProductData(data);
    },
    // 跳转到产品页面 并且传递参数
    toProduct(categoryId, activeKey) {
      // 使用编程式导航进行路由的跳转
      this.$router.push({
        // 路径
        path: "/manager/product",
        // 参数的传递
        query: {
          categoryId,
          activeKey,
        },
      });
    },
  },
  created() {
    // this.setEmployeeId()
    // 自动获取轮播图的数据
    this.getAllSwipeData();
    // 自动获取栏目数据
    this.queryCategory();
    // 自动获取产品数据
    this.queryProduct();
    this.getUserInfo().then((r) => {
      this.employeeId = this.userInfo.id;
      this.getAllOrder();
    });
  },
};
</script>

<style scoped>
.title {
  height: 130px;
  background-image: linear-gradient(90deg, #7579ff, #bf73ff);
  border-bottom-left-radius: 28px;
  border-bottom-right-radius: 28px;
  text-align: center;
  color: #fff;
}
.van-nav-bar .van-hairline--bottom {
  background: red;
}
.van-image {
  width: 80px;
  height: 80px;
}
.swipe {
  width: 80%;
  height: 140px;
  position: absolute;
  background-color: #9002bf;
  top: 136px;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 8px;
}
/* 设置轮播区域的样式 */
.swipe img {
  width: 100%;
  /* height: 150px; */
  border-radius: 8px;
}
.van-cell__title {
  color: #4f4f4f;
  font-size: 16px;
  font-family: "_GB2312 KaiTi_GB2312";
}
.van-card {
  background-color: #fff;
  box-shadow: 0 0 6px 0 gray;
}
.card {
  margin-top: 8em;
}
</style>